<template>
  <div class="app-container">

    <el-table v-loading="loading" :data="RechargeList">
      <el-table-column label="用户名" align="left" prop="userName" width="180" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- <span style="vertical-align: middle;margin-right: 8px">
          <oss-image-preview v-if="scope.row.avatar" :src="scope.row.avatar" :width="30" :height="30"/>
          </span> -->
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="打款方式" align="center" prop="paymentMethod" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_method" :value="scope.row.paymentMethod" />
        </template>
      </el-table-column>
      <el-table-column label="充值类型" align="center" prop="rechargeType" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.recharge_type" :value="scope.row.rechargeType" />
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center" prop="source" width="140" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_source" :value="scope.row.source" />
        </template>
      </el-table-column>
      <el-table-column label="充值金额($)" align="center" prop="amount" width="140" :show-overflow-tooltip="true" :formatter="formatterAmount"/>
      <el-table-column label="实际到账金额($)" align="center" prop="realAmount" width="140" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.realAmount)}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="汇率国家名称" align="center" prop="exchangeRateName" width="140" :show-overflow-tooltip="true" />
      <el-table-column label="汇率国家缩写" align="center" prop="country" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="汇率" align="center" prop="exchangeRate" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="汇率金额" align="center" prop="rateAmount" width="120" :show-overflow-tooltip="true" /> -->
      <el-table-column label="充值人姓名" align="center" prop="rechargeName" width="160" />
      <el-table-column label="申请时间" align="center" prop="createTime" width="220">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{h}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="auditType" width="140">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.recharge_withdraw_status" :value="String(scope.row.auditType)" />
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" />

  </div>
</template>

<script>
import { listRecharge } from "@/api/user/recharge";
import Template from '@/views/setting/template/index.vue'
import {convertTimestamp, convertToZeroUTC} from "@/utils/yun";

export default {
  name: "Recharge",
  components: { Template },
  dicts: ['user_type', 'payment_method', 'payment_source', 'recharge_type', 'recharge_withdraw_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户充值表格数据
      RechargeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        auditType:1,
        userId:null,
      },
      dateRange: [],
      // 表单参数
      form: {},
    };
  },
  created() {
    if (this.$route.query.id){
      this.queryParams.userId = this.$route.query.id;
    }
    this.getList();
  },
  methods: {
    convertTimestamp,
    convertToZeroUTC,
    /** 查询用户充值列表 */
    getList() {
      this.loading = true;
      listRecharge({ ...this.queryParams })
        .then(response => {
          this.RechargeList = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams = {
        ...this.queryParams,
        startDate: null,
        endDate: null
      }
      this.handleQuery();
    },
    formatterAmount:function(row){
      return this.$yun.priceFormatter(row.amount);
    },
  },
};
</script>
